<template>
    <div class="container">
        <el-form ref="form" :model="form" label-width="100px" size="mini" v-loading="loading">
            <el-row>
                <el-col :span="24">
                    <el-form-item label="指标名称">
                        <el-input v-model="form.quotas_name"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="20">
                <el-col :span="12"> <el-form-item label="指标标签">
                        <el-select v-model="form.quotas_type">
                            <el-option v-for="item in zblx" :label="item.label" :value="item.value" :key="item.label"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="12"> <el-form-item label="指标类型">
                        <el-select v-model="form.quotas_attribute">
                            <el-option v-for="item in zbbq" :label="item.attribute_name" :value="item.attribute_code" :key="item.attribute_code"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <!-- <el-col :span="1">
                    <div class="imgIcon">
                        <img src="@/assets/images/u1914.png" alt="">
                    </div>
                </el-col> -->
            </el-row>

           
            <el-row>
                <el-col :span="24"> <el-form-item label="指标参数">
                    <!-- <el-input type="textarea" v-model="form.quotas_parameters" :autosize="{ minRows: 4, maxRows: 8 }"></el-input> -->
                        <codemirror v-model="form.quotas_parameters" :options="cmOptions" ref="addFormula"></codemirror>
                    </el-form-item>
                </el-col>
                <!-- <el-col :span="1">
                    <div class="imgIcon">
                        <img src="@/assets/images/u1914.png" alt="">
                    </div>
                </el-col> -->
            </el-row>
             <el-row>
                <el-col :span="24"> <el-form-item label="指标阈值">
                        <el-input v-model="form.threshold"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="20">
                <el-col :span="12"> <el-form-item label="指标状态">
                        <el-select v-model="form.yxbz">
                            <el-option label="启用" value="Y"></el-option>
                            <el-option label="停用" value="N"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="有效期">
                        <el-date-picker v-model="form.yxq" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd">
                        </el-date-picker>
                    </el-form-item>
                </el-col>

            </el-row>
            <el-row>
                <el-col :span="24">
                    <el-form-item label="业务说明">
                        <el-input type="textarea" v-model="form.quotas_desc" :autosize="{ minRows: 4, maxRows: 8 }"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="20">
                <el-col :span="12">
                    <el-form-item label="实现方式">
                        <el-select v-model="form.calculation_method">
                            <el-option label="java方法" value="01" selected></el-option>
                            <el-option label="sql" value="02"></el-option>
                            <!-- <el-option label="javascript" value="03"></el-option> -->
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="java方法名" v-if="form.calculation_method == '01'">
                        <el-input v-model="form.achieve_method_name"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row v-if="form.calculation_method == '02'">
                <el-col :span="24">
                    <el-form-item label="实现sql">
                        <div class="codeC">
                            <codemirror v-model="form.achieve_sql" :options="cmOptions" ref="addFormula"></codemirror>
                            <!-- <div class="tabs">
                                <div class="tabs-item">代码</div>
                                <div class="tabs-item" style="background-color:rgba(121, 121, 121, 1);">配置</div>
                            </div> -->
                        </div>
                    </el-form-item>

                </el-col>
            </el-row>
            <el-row v-if="form.calculation_method == '03'">
                <el-col :span="24">
                    <el-form-item label="javascript逻辑表达式">
                        <div class="codeC">
                            <codemirror v-model="form.achieve_js" :options="cmOptions" ref="addFormula"></codemirror>
                            <!-- <div class="tabs">
                                <div class="tabs-item">代码</div>
                                <div class="tabs-item" style="background-color:rgba(121, 121, 121, 1);">配置</div>
                            </div> -->
                        </div>
                    </el-form-item>

                </el-col>
            </el-row>

            <el-row :gutter="20">
                <el-col :span="12">
                    <el-form-item label="创建时间">
                        <el-input v-model="form.create_time" disabled></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="创建人">
                        <el-input v-model="form.create_by" disabled></el-input>
                    </el-form-item>
                </el-col>

            </el-row>

            <el-form-item>
                <div style="text-align:center;">
                    <el-button type="primary" @click="onSubmit">保存</el-button>
                    <el-button @click="go('list')">返回</el-button>
                </div>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
// require component
import { codemirror } from "vue-codemirror";
import { queryQuotasAttribute, addQuotas } from '@/api/tzyy/mxkc'
// require styles
import "codemirror/lib/codemirror.css";
import "codemirror/theme/material.css"; // 引入控制主题，没有的话主题不起效果
require("codemirror/mode/python/python.js");
require("codemirror/addon/fold/foldcode.js");
require("codemirror/addon/fold/foldgutter.js");
require("codemirror/addon/fold/brace-fold.js");
require("codemirror/addon/fold/xml-fold.js");
require("codemirror/addon/fold/indent-fold.js");
require("codemirror/addon/fold/markdown-fold.js");
require("codemirror/addon/fold/comment-fold.js");
export default {
    components: {
        codemirror,
    },
    data() {
        return {
            loading: false,
            form: {
                quotas_name: '',
                quotas_type: '',
                quotas_attribute: '',
                yxbz: '',
                yxq: '',
                quotas_desc: '',
                achieve_method_name: '',  //java方法名
                achieve_sql: '',//实现sql
                achieve_js: '',//实现javascript逻辑表达式
                calculation_method: '01',
                threshold:'',
                quotas_parameters:''
            },

            zblx: [
                {
                    value: '00',
                    label: '强指标',
                },
                {
                    value: '01',
                    label: '弱指标',
                }
            ],
            zbbq: [

            ],

            cmOptions: {
                // 配置项
                tabSize: 4, // 制表符的宽度
                mode: "python", // 使用的模式
                // theme: "material", // 主题黑色
                theme: "darcula", // 主题白色
                lineNumbers: true, // 是否显示行号
                lineWrapping: true, // 是否应滚动或换行以显示长行
                extraKeys: { Ctrl: "autocomplete" },
                lineWiseCopyCut: true, // 在没有选择的情况下进行复制或剪切将复制或剪切有光标的整行。
                showCursorWhenSelecting: true, // 选择处于活动状态时是否应绘制光标
                maxHighlightLength: Infinity, // 显示长行的时候 这个值是不限制，如果要做限制的话，值是number类型
                matchBrackets: true, // 光标匹配括号
                line: true,
                readOnly: false, // 只读
            },
          
        }
    },
    mounted() {
        this.getQueryQuotasAttribute()
    },
    methods: {
        onSubmit() {

            if (this.form.quotas_name == '') {
                this.$message.error('指标名称不能为空！')
                return false
            }
            if (this.form.quotas_type == '') {
                this.$message.error('请选择指标类型！')
                return false
            }
            // if(this.form.quotas_attribute == ''){
            //     this.$message.error('请选择指标标签！')
            //     return false
            // }
            if (this.form.yxbz == '') {
                this.$message.error('请选择指标状态！')
                return false
            }
            if (this.form.yxq == '') {
                this.$message.error('请选择有效期！')
                return false
            }

            if (this.form.calculation_method == '') {
                this.$message.error('实现方式不能为空！')
                return false
            } else if (this.form.calculation_method == '01' && this.form.achieve_method_name == '') {
                this.$message.error('java实现方法名')
                return false
            } else if (this.form.calculation_method == '02' && this.form.achieve_sql == '') {
                this.$message.error('实现sql不能为空')
                return false
            } else if (this.form.calculation_method == '03' && this.form.achieve_js == '') {
                this.$message.error('实现javascript逻辑表达式不能空！')
                return false
            }
            let params = {
                quotas_name: this.form.quotas_name,
                quotas_type: this.form.quotas_type,
                quotas_attribute: this.form.quotas_attribute,
                yxbz: this.form.yxbz,
                yxqq: this.form.yxq[0],
                yxqz: this.form.yxq[1],
                quotas_desc: this.form.quotas_desc,
                achieve_method_name: this.form.achieve_method_name,  //java方法名
                achieve_sql: this.form.achieve_sql,//实现sql
                achieve_js: this.form.achieve_js,//实现javascript逻辑表达式
                calculation_method: this.form.calculation_method,
                threshold:this.form.threshold,
                quotas_parameters:this.form.quotas_parameters
            }
            console.log(params)
            this.loading = true
            addQuotas(params).then(res => {
                this.loading = false
                if (res.code == 200) {
                    this.$message.success('保存成功！')
                    this.go('list')
                }
            })
            console.log('submit!');
        },
        //获取模型指标option
        getQueryQuotasAttribute() {
            queryQuotasAttribute().then(res => {
                if (res.code == 200) {
                    this.zbbq = res.data
                }
            })
        },
        //待处理
        go(name, params) {
            this.$emit('changePage', name, params);
        },
    }
}
</script>

<style lang="scss" scoped>
.container {
    height: 100%;
    width: 100%;
    background-color: #fff;
    padding: 15px 50px;

    .btn {
        padding: 8px 8px 8px 0;
    }

    .el-select,
    .el-input,
    .el-date-editor {
        width: 100%;
    }

    .imgIcon {
        width: 30px;
        height: 30px;

        img {
            width: 100%;
            height: 100%;
        }
    }

    .codeC {
        display: flex;
        justify-content: space-between;

        .tabs {
            width: 35px;

            .tabs-item {
                text-align: center;
                padding: 11px;
                height: 80px;
                background-color: rgba(22, 155, 213, 1);
                box-sizing: border-box;

                border-radius: 5px;
                -moz-box-shadow: none;
                -webkit-box-shadow: none;
                box-shadow: none;
                font-size: 14px;
                color: #ffffff;
                border-radius: 5px;
            }
        }
    }

    .vue-codemirror {
        // width: calc(100% - 35px);
        width: 100%;
        border: 1px solid #dcdfe6;
    }
}
</style>